<template>
  <div id="app">
   <div class="jumbotron">
     <h1>Hello, world!</h1>
     <p>...</p>
     <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
   </div>
   <Add :adds='adds'/>
   <list :comments='comments' :deleteUser="deleteUser"/>
  </div>
</template>
<script>
import Add from './components/Add.vue'
import list from './components/list.vue'
export default {
  data () {
    return {
      comments: [
        {
          name: 'foo',
          email: '3344@qq.com'
        },
        {
          name: 'bar',
          email: '1122@qq.com'
        },
        {
          name: 'jar',
          email: '5566@qq.com'
        }
      ]
    }
  },
  methods: {
    // 添加信息
    adds (i) {
      this.comments.unshift(i)
    },
    // 删除信息
    deleteUser (index) {
      this.comments.splice(index, 1)
    }
  },
  components: {
    Add,
    list
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
